<template>
	<view>
		<view class="u-flex search-div">
			<view class="search-box "><u-search @search="searchlist" :showAction="false" placeholder="请输入图片名称" v-model="keyword"></u-search></view>

			<view class="u-flex-1 u-m-l-20">
				<u-upload @afterRead="afterRead" @delete="deletePic" name="1" multiple><u-button type="primary" size="small" shape="circle">上传图片</u-button></u-upload>
			</view>
		</view>
		<u-gap height="120rpx"></u-gap>
		<view class="tabs-box"><u-tabs :current="current" :list="groupList" @click="clickTabs"></u-tabs></view>

		<view class="">
			<swiper class="swiper-div" @change="changeswiper" :current="current" :indicator-dots="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(data, index) in groupList" :key="index">
					<scroll-view @scrolltolower="scrolltolower" class="swiper-div" scroll-y="true">
						<view class="img-list u-flex u-flex-wrap">
							<view @click="selectimg(item)" class="img-box" v-for="(item, i) in data.piclist" :key="i">
								<u-image v-if="item.pic_path.indexOf('http') > -1" width="230rpx" height="230rpx" :src="item.pic_path"></u-image>
								<u-image v-else width="230rpx" height="230rpx" :src="$BasicsUrl + '/' + item.pic_path"></u-image>
								<view class="mask-div" v-if="selectlist.findIndex(_ => _.pic_path == item.pic_path) > -1">
									<u-icon name="checkbox-mark" color="#fff" size="36"></u-icon>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="cancal">取消</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="save">选择({{ selectlist.length }}/{{ limit }})</u-button>
		</view>
		<u-popup mode="top" :show="show" @close="show = false">
			<view class="u-p-10">
				<xiaokeai-dragImage
					:rowNum="rowNum"
					:imgRadius="10"
					:imgSize="240"
					:imgPadding="16"
					:imgList.sync="selectlist"
					@moveEndList="moveEndList"
					@delImg="delImg"
				></xiaokeai-dragImage>
			</view>
			<view class="u-flex u-flex-items-center footer">
				<u-button size="small" shape="circle" @click="show = false">取消</u-button>
				<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="save">选择({{ selectlist.length }}/{{ limit }})</u-button>
			</view>
		</u-popup>

		<lc-fab-touch ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
// 引入配置
import config from '@/common/config';
import {mapState, mapMutations} from 'vuex';
import xiaokeaidragImage from '@/components/xiaokeai-dragImage/xiaokeai-dragImage.vue';

export default {
	name: 'map-storage',
	data() {
		return {
			groupList: [],
			piclist: [],
			triggered: false,
			current: 0,
			fileList1: [],
			keyword: '',
			selectlist: [],
			limit: 10,
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF'
			},
			content: [
				{
					iconPath: 'arrow-up',
					selectedIconPath: 'arrow-up',
					text: '顶部',
					type: 'top',
					active: false
				},

				{
					iconPath: 'photo',
					selectedIconPath: 'photo-fill',
					text: '已选图片',
					active: false
				},
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					active: false
				}
			],
			rowNum: 2,
			show: false,
			key_id: ''
		};
	},
	onLoad(e) {
		if (e.id) {
			this.key_id = e.id;
			this.limit = this.$SelectData[this.key_id].Limit;
			this.getgroupList();
			let list = this.$SelectData[this.key_id].imgList;
			list.forEach(a => {
				this.selectlist.push({pic_path: a});
			});
		} else {
			this.getgroupList();
		}
	},
	components: {
		xiaokeaidragImage
	},
	computed: {
		...mapState({
			$BasicsUrl: state => state.$BasicsUrl,
			$SelectData: state => state.$SelectData
		})
	},
	methods: {
		save() {
			if (this.key_id) {
				this.$SelectData[this.key_id].imgList = [];
				this.selectlist.forEach(a => {
					this.$SelectData[this.key_id].imgList.push(a.pic_path);
				});
				this.$store.commit('setSelectData', this.$SelectData);
				uni.$u.route({
					type: 'back'
				});
			} else {
				let _this = this;
				uni.navigateBack({
					delta: 1,
					success() {
						const eventChannel = _this.getOpenerEventChannel();
						eventChannel.emit('getImg', _this.selectlist);
					}
				});
			}
		},
		cancal() {
			uni.$u.route({
				type: 'back'
			});
		},
		trigger(e) {
			this.content[e.index].active = !e.item.active;
			if (e.index == 1) {
				this.rowNum = Math.ceil(this.selectlist.length / 3);
				this.show = true;
			} else if (e.index == 2) {
				uni.$u.route({
					url: 'pages/index/index'
				});
			}
		},
		fabClick() {},
		searchlist() {
			this.groupList[this.current].page = 1;
			this.groupList[this.current].piclist = [];
			this.getpiclist();
		},
		getgroupList() {
			uni.$u.http
				.get('/shop/pic/groupList',{custom:{id:3}})
				.then(res => {
					let groupList = res.msg;
					groupList.forEach(a => {
						a.badge = {
							value: a.count,
							showZero: true,
							max: 100000
						};
						a.page = 1;
						a.piclist = [];
					});
					this.groupList = groupList;
					this.getpiclist();
				})
				.catch(err => {});
		},
		scrolltolower() {
			this.getpiclist();
		},
		getpiclist() {
			let page = this.groupList[this.current].page;
			let size = 24;
			if (page == 1) {
				size = 24;
			}
			let data = {};
			if (this.current == 1) {
				data.type = 1;
			}
			if (this.current > 1) {
				data.pic_group_id = this.groupList[this.current].id;
			}
			if (this.keyword) {
				data.pic_name = this.keyword;
			}
			uni.$u.http
				.get('/shop/pic/picList?page=' + page + '&size=' + size, {
					params: data,
					custom:{id:3}
				})
				.then(res => {
					let piclist = res.msg.data;
					if (piclist.length > 0) {
						this.groupList[this.current].page++;
						piclist.forEach(a => {
							a.checked = false;
							if (a.pic_path.indexOf('http') == -1) {
								a.pic_path_show = this.$BasicsUrl + '/' + a.pic_path;
							} else {
								a.pic_path_show = a.pic_path;
							}
						});
						this.groupList[this.current].piclist = this.groupList[this.current].piclist.concat(piclist);

						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				})
				.catch(err => {});
		},
		clickTabs(data) {
			let index = data.index;
			this.current = index;
		},
		changeswiper(e) {
			this.current = e.detail.current;
			if (this.groupList[this.current].piclist.length == 0) {
				this.getpiclist();
			}
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				this.groupList[this.current].piclist.splice(0, 0, result);
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: config.baseUrl + '/shop/pic/addPic', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'image',
					formData: {},
					header: {
						Authorization: this.$store.state.$Token
					},
					success: res => {
						let result = JSON.parse(res.data);
						resolve(result.msg);
					},
					fail: err => {}
				});
			});
		},
		selectimg(item) {
			let i = this.selectlist.findIndex(_ => _.pic_path == item.pic_path);
			if (i > -1) {
				this.selectlist.splice(i, 1);
			} else {
				if (this.selectlist.length < this.limit) {
					this.selectlist.push(item);
				}
			}
		},
		moveEndList(e) {
			console.log('移动结束后的新图片列表');
			console.log(e);
		},

		delImg(e) {
			console.log('删除图片点击事件');
			console.log(e);
			this.selectlist.splice(e, 1);
			this.rowNum = Math.ceil(this.selectlist.length / 3);
		},
		startDel() {
			this.enableDel = !this.enableDel;
		}
	}
};
</script>

<style lang="scss">
.search-box {
	width: 600rpx;
}
.swiper-div {
	height: calc(100vh - 320rpx);
}
// .scroll-div{
// 	height: calc(100vh - 260rpx);
// }
.img-list {
	.img-box {
		margin-left: 15rpx;
		margin-top: 15rpx;
		width: 230rpx;
		height: 230rpx;
	}
}

.mask-div {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.img-box {
	position: relative;
}
.tabs-box {
	height: 80rpx;
	// position: fixed;
	// top: 120rpx;
}
</style>
